<template>
	<view class="page success_page">
		<view class="success_icon">
			<image class="icon" src="@/static/icon/consultation/success_icon.png" mode="scaleToFill"></image>
		</view>
		<view class="success_info">
			<view class="title success_title ">
				<view class="text">
					申请已提交
				</view>
			</view>
			<view class="tips">
				<view>
					1、平台已将该申请告知给医生，请等待医生接诊。
				</view>
				<view>
					2、接诊结果会以短信的形式发送。
				</view>
			</view>
			<view class="btns_group">
				<view class="btns success_btns" @click="gotoPage()">
					查看{{`${type=="reservation"?"预约":type=="consultation"?"问诊":""}`}}详情
				</view>
				<view class="btns success_btns hollow_btns" @click="gotoSwitchPage('/pages/index/index')">
					返回首页
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: '',
		data() {
			return {
				type: "",
				id: 0
			}
		},
		onLoad(options) {
			console.log(options)
			this.id = options.id
			this.type = options.type
		},
		methods: {
			gotoPage() {
				let url
				if (this.type == 'consultation') {
					url = `/pagesCommon/consultation/concernedDetails?id=${this.id}`
				} else if (this.type == 'reservation') {
					url = `/pagesCommon/reservation/reservationDetails?id=${this.id}`
				}
				uni.navigateTo({
					url
				})
			},
			gotoSwitchPage(url) {
				uni.switchTab({
					url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.success_page {
		background-color: #fff;
		position: relative;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;

		.success_icon {
			position: absolute;
			left: 48.5%;
			top: 25%;
			transform: translate(-50%, -50%);

			.icon {
				width: 180rpx;
				height: 160rpx;
			}
		}

		.success_info {
			.success_title {
				margin-top: 50rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.tips {
				margin-top: 40rpx;
				font-size: 28rpx;
				color: #999999;
			}

			.btns_group {
				margin: 50rpx;

				.success_btns {
					padding: 30rpx 0;
					margin-bottom: 30rpx;
				}

				.hollow_btns {
					border: 1px solid #3B6CFE;
					color: #3B6CFE;
					background: #fff;
				}
			}
		}
	}
</style>